import React from 'react'
import styles from '../index.module.css'

export interface DoctorCardProps {
  doctor: any
  index: number
}

const DoctorCard: React.FC<DoctorCardProps> = ({ doctor, index }) => {
  const doctorInfo = {
    id: doctor.id || doctor.doctorid || index,
    name: doctor.name || doctor.doctorname || doctor.doctorName || '医生姓名',
    title: doctor.title || doctor.doctorstate || doctor.doctorTitle || '副主任医师',
    hospitalLevel: doctor.hospitalLevel || doctor.hospital_level || doctor.level,
    hospital: doctor.hospital || doctor.socoadmin || doctor.hospitalName || '医院名称',
    department: doctor.department || doctor.departmentName || doctor.dept || '科室',
    avatar: doctor.avatar || doctor.image || doctor.doctorimage || doctor.avatarUrl || '/default-avatar.png',
    consultationTypes: doctor.consultationTypes || doctor.consultation_types || ['图文咨询', '电话咨询'],
    specialties: doctor.specialties || doctor.doctorgood || doctor.speciality || '擅长领域',
    rating: doctor.rating || doctor.rating_rate || doctor.goodRate || '100%',
    pennants: doctor.pennants || doctor.banner_count || doctor.flagCount || '0',
    views: doctor.views || doctor.doctorbrowse || doctor.browseCount || doctor.viewCount || '0',
    price: doctor.price || doctor.doctorprice || doctor.consultPrice || doctor.consult_price || '0'
  }

  return (
    <div key={doctorInfo.id} className={styles.doctorCard}>
      <div className={styles.doctorAvatar}>
        <img src={doctorInfo.avatar} alt={doctorInfo.name} />
      </div>
      <div className={styles.doctorInfo}>
        <div className={styles.doctorHeader}>
          <h3 className={styles.doctorName}>{doctorInfo.name}</h3>
          <span className={styles.doctorTitle}>{doctorInfo.title}</span>
          {doctorInfo.hospitalLevel && (
            <span className={styles.hospitalLevel}>{doctorInfo.hospitalLevel}</span>
          )}
        </div>
        <div className={styles.doctorDepartment}>
          {doctorInfo.hospital} {doctorInfo.department}
        </div>
        <div className={styles.consultationMethods}>
          {Array.isArray(doctorInfo.consultationTypes) && doctorInfo.consultationTypes.map((type: string, idx: number) => (
            <span key={idx} className={styles.consultationTag}>{type}</span>
          ))}
        </div>
        <div className={styles.doctorSpecialties}>
          擅长: {doctorInfo.specialties}
        </div>
        <div className={styles.doctorStats}>
          <span className={styles.statItem}>
            好评率<span className={styles.highlight}>{doctorInfo.rating}</span>
          </span>
          <span className={styles.statItem}>
            锦旗<span className={styles.highlight}>{doctorInfo.pennants}</span>
          </span>
          <span className={styles.statItem}>
            浏览人次<span className={styles.highlight}>{doctorInfo.views}</span>
          </span>
        </div>
        <div className={styles.doctorFooter}>
          <div className={styles.price}>
            ¥<span className={styles.priceAmount}>{doctorInfo.price}</span>起
          </div>
          <button className={styles.consultButton}>问医生</button>
        </div>
      </div>
    </div>
  )
}

export default DoctorCard


